<template>
	<view class="wantSee">
		<img class='bg-img' src="../static/bg.png" alt="">
		<title @titleHeight='setPaddingTop' :center="true" title="我想看的" iconSize="38" :bgcolor="titleSty.bgColor"
			:color="titleSty.color" @toclick="toBack(1)" :icon="titleSty.icon"></title>

		<view class="wantSee_body" :style="{'padding-top': height + 'px'}">
			<view class="allCount">
				共 <text>{{count}}</text> 部影片
			</view>
			<view class="list" v-if="list.length > 0">
				<view class="block" v-for="(item,index) in list" :key='index'>
					<image class="bill" :src="item.img" mode="scaleToFill"></image>
					<view class="info f24">
						<view class="mn v bold">
							<text>{{item.nm}}</text>
							<!-- <image class="heart" src="../static/wantsee.png" mode=""></image> -->
						</view>
						<view class="peopleCount v">
							<text class="t f32 bold">{{item.wish | trannumber}}</text>人想看
						</view>
						<view class="performer v">
							演员:{{item.star | ellipsis(18)}}
						</view>
						<view class="date v medium">
							{{item.rt | changeTime}}中国大陆上映
						</view>
					</view>
				</view>
			</view>
			<view v-if='list.length <= 0 && loading' class="flex-column align-center">
				<img class='img' src="../static/wantosee-1.png" alt="" />
				<text class="f28" style="color: #333333;">有想看的记得告诉我~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				titleSty: {
					bgColor: 'none',
					color: '#000',
					icon: 'icon',
				},
				height: 0,
				timer: null,
				limit: 10,
				offset: 0,
				list: [],
				count: 0,
				loadOver: false,
				loading: true,
			}
		},
		components: {
			title
		},
		onLoad() {
			this.getDate()
		},
		filters: {
			changeTime(v) {
				return v.split(' ')[0]
			},
		},

		onPageScroll(e) {
			if (e.scrollTop > 30) {
				this.titleSty.bgColor = 'white'
			} else {
				this.titleSty.bgColor = 'none'

			}
		},

		onReachBottom() {
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.offset = this.offset + this.limit
			this.timer = setTimeout(() => this.getDate(), 1000)
		},
		methods: {
			setPaddingTop(data) {
				this.height = data.height
			},
			// 跳转
			toBack(i) {
				uni.navigateBack({
					delta: i
				})
			},
			// 获取数据
			getDate() {
				if (this.loadOver) {
					return
				}
				this.loading = false
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let _this = this
				let data = {
					limit: this.limit,
					offset: this.offset
				}
				this.$api.getLike(data).then((res) => {
					uni.hideLoading()
					this.loading = true
					if (res.data.data.row.length > 0) {
						this.list = [...this.list, ...res.data.data.row]
						this.count = res.data.data.count
						if (this.limit * this.offset + 10 >= this.count) {
							this.loadOver = true
						}
					} else {
						uni.showToast({
							title: '没有数据了',
							icon: 'none'
						})
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.wantSee {
		width: 100vw;
		height: 100vh;
		position: relative;

		.bg-img {
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.wantSee_body {
			position: relative;
			z-index: 1;
			// background-color: #F1F1F1;
			padding: 0 20rpx;
			padding-bottom: 20rpx;

			.allCount {
				color: #000000;
				font-size: 28rpx;
				padding-bottom: 32rpx;
				padding-left: 20rpx;
				border-bottom: 1px solid rgba(232, 234, 238, 0.7000);

				// margin-bottom: 24rpx;
				text {
					color: #FF4345;
				}

				// text-align: end;
			}

			.img {
				margin-top: 286rpx;
				width: 360rpx;
				height: 250rpx;
			}

			.list {
				.block {
					position: relative;
					width: 100%rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					padding: 24rpx 20rpx;
					font-size: 26rpx;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					border-bottom: 1px solid rgba(232, 234, 238, 0.7000);
					
					&:last-child{
						border-bottom: none;
					}

					.bill {
						width: 160rpx;
						height: 214rpx;
						border-radius: 8rpx;
						margin-right: 24rpx
					}

					.info {
						flex: 1;
						color: #666666;

						.v {
							margin-bottom: 12rpx;
						}

						.mn {
							width: 100%;
							display: flex;
							color: #000000;
							font-size: 32rpx;
							font-weight: bold;
							justify-content: space-between;

							.heart {
								width: 35rpx;
								height: 31rpx;
							}
						}

						.peopleCount {
							.t {
								color: #EF3B5D;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>
